<template>
	<view>
		<u-popup v-model="showPopup" mode="center" width="650rpx" :mask-close-able="false" :border-radius="15"
			@close="close">
			<view class="popupWrapper">
				<view class="title">{{sitename}}隐私保护指引</view>
				<view class="text">
					在使用{{sitename}}服务之前，请仔细阅读<span @click="openPrivacyContract">{{privacyContractName}}</span>。如你同意{{privacyContractName}}，请点击“同意”开始使用{{sitename}}。
				</view>
				<view class="btns">
					<button class="btn_refuse" @click="refuse">拒绝</button>
					<button class="btn_agree" @click="agree">同意</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: ['sitename', 'showPrivacy', 'privacyContractName'],
		data() {
			return {
				showPopup: false
			}
		},
		mounted() {
			this.showPopup = this.showPrivacy
			console.log(this.privacyContractName, 'privacyContractName')
		},
		methods: {
			openPrivacyContract(){
				wx.openPrivacyContract({
				  success: () => {}, // 打开成功
				  fail: () => {}, // 打开失败
				  complete: () => {}
				})
			},
			open() {
				this.showPopup = true
			},
			close() {
				this.showPopup = false
			},
			showAgreement(alias) {
				uni.navigateTo({
					url: '/commonViews/Agree?alias=' + alias
				})
			},
			agree() {
				this.showPopup = false
				let params = {
					showPrivacy: false,
					privacyContractName: this.privacyContractName
				}
				uni.setStorageSync('privacySettingObj', JSON.stringify(params))
			},
			refuse() {
				// this.showPopup = false
				let params = {
					showPrivacy: true,
					privacyContractName: this.privacyContractName
				}
				uni.setStorageSync('privacySettingObj', JSON.stringify(params))
				uni.showToast({
					icon: 'none',
					title: '请关闭小程序'
				})
			},
			handleOpenPrivacyContract() {
				// 打开隐私协议页面
				wx.openPrivacyContract({
					success: () => {}, // 打开成功
					fail: () => {}, // 打开失败
					complete: () => {}
				})
			}
		}
	}
</script>

<style lang="scss" scope>
	.popupWrapper {
		box-sizing: border-box;
		padding: 40rpx 30rpx 30rpx;

		.title {
			font-size: 32rpx;
			text-align: center;
			font-weight: bold;
			margin-bottom: 24rpx;
		}

		.text {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 24rpx;
			text-align: justify;

			span {
				color: #6799ff;
			}
		}

		.btns {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 50rpx;

			.btn_refuse {
				width: 47%;
				height: 80rpx;
				line-height: 80rpx;
				border: none;
				color: #333;
				background: #f6f6f6;
				font-size: 30rpx;

				&::after {
					border: none;
				}
			}

			.btn_agree {
				border: none;
				width: 47%;
				color: #fff;
				background: #3f7eff;
				font-size: 30rpx;
				height: 80rpx;
				line-height: 80rpx;

				&::after {
					border: none;
				}
			}
		}
	}
</style>